<template>
  <div class="page">
    <img class="box"
         src="./assets/bg.png">

    <div class="content">
      <div v-if="robot.online === 0"
           class="mt-30 flex column">
        <div class="relative">
          <img v-if="encode"
               :src="encode"
               class="encode">
          <img v-if="!encode"
               src="../../assets/template.png"
               class="encode">
          <div v-if="!encode"
               class="login_avatar_txt flex h-center">
            正在加载...
          </div>
          <div v-if="!encode"
               class="loadEffect">
            <span />
            <span />
            <span />
            <span />
            <span />
            <span />
            <span />
            <span />
          </div>
        </div>
        <div class="fs-12 color-gray mt-1">
          用需要登录的微信账号扫描上方二维码
        </div>
        <div class="mt-1 fs-12 color-warning">（长按识别无效）</div>
        <button class="mt-4 reflesh"
                @click="refreshs()">刷新二维码</button>
      </div>

      <div v-if="robot.online === 2"
           class="mt-30 flex column">
        <img :src="robot.headImgUrl"
             class="avatar">
        <div class="color-danger fs-12 b mt-2">{{ robot.nickName }}</div>
      </div>

      <div class="dirver mt-6" />
      <div class="ml-15 mr-15 fs-12 b mt-15">扫码步骤：</div>

      <div class="fs-12 color-gray ml-15 mr-15 mb-30">
        <div class="flex v-top mt-1">
          <div>1.</div>
          <div>
            请用另一台设备（或让好友帮忙）拍摄二维码，或者手机截屏保存二维码后将图片发送给其他手机或者电脑；
          </div>
        </div>
        <div class="flex v-top mt-1">
          <div>2.</div>
          <div>打开需要登录播货助手的微信，打开「扫一扫」扫描二维码登录；</div>
        </div>
        <div class="flex v-top mt-1">
          <div>3.</div>
          <div>
            扫码成功后，系统等待几秒获取账号信息后会自动刷新，请耐心等待；
          </div>
        </div>
        <div class="flex v-top mt-1">
          <div>4.</div>
          <div>为了避免账号异常，请勿重复扫码。</div>
        </div>
      </div>

      <div class="color-blue flex fs-12 mt-4 mb-4 h-center"
           @click="show=true">
        如何让您的登录的机器人更加稳定，不容易掉线？
      </div>
    </div>

    <van-popup v-model:show="show"
               style="width: 75%"
               class="flex column pl-3 pr-3">
      <div class="fs-14 b mt-4">如何让机器人更加稳定，不容易掉线？</div>
      <div class="fs-12 mt-3 color-gray">1.用户不要主动关闭微信登陆（比如关闭网页或者windows登陆）；</div>
      <div class="fs-12 mt-1 color-gray">2.用户不要随意更换登陆设备（比如从原先使用的手机换到另外一个手机上登陆）；</div>
      <div class="fs-12 mt-1 color-gray">3.用户应避免在使用中的同时扫码登陆到其他PC端（比如扫码登陆到其他平板类设备）；</div>
      <div class="fs-12 mt-1 color-gray">4.用户应避免随意频繁的更改微信密码（比如手机端收到官方提醒 您微信存在环境异常，请确认是否本人登陆，为了安全，请修改登陆密码之类的）；</div>
      <div class="fs-12 mt-1 color-gray">5.在初始登陆的24小时内，避免频繁操作，如需发送群消息或者个友信息，间隔时间最好为5-8分钟</div>
      <div class="fs-12 mt-1 color-primary b">重点：商家在进行了以上第2点、第3点后，之后的一个周期（8天）内都有一定几率会被官方踢下线！！！</div>
      <button class="mt-4 mb-4 reflesh b"
              @click="show=false">我知道了</button>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Dialog, Toast } from 'vant'

export default {
  name: 'Index',
  components: {},
  data () {
    return {
      loading: false,
      robot: {
        online: 0
      },
      robotValue: '',
      wxType: 1,
      soNumber: '',

      loginType: 0,
      inviteCode: '',
      encode: '',
      control: 0,
      timer: '',

      timeControls: '',
      show: false
    }
  },
  computed: {},
  created () {
    const _this = this
    _this.initData()
  },
  unmounted () {
    let _this = this;
    clearInterval(_this.timeControls);
  },
  methods: {
    async initData () {
      const _this = this
      _this.control = 2
      await _this.getData()
      await _this.loginWx()
    },
    getData () {
      const _this = this
      return new Promise((resolve, reject) => {
        _this
          .$post('/WxRobot/GetPorts', { wxType: _this.wxType })
          .then((res) => {
            if (res) {
              _this.robot = res[0]
              _this.robot.online = 0
            }
            resolve()
          })
          .catch(() => {
            reject()
          })
      })
    },
    async loginWx () {
      const _this = this
      // console.log(_this.robot.deviceId)
      await _this
        .$post('/WxRobot/WxRobotLogin', {
          deviceId: _this.robot.deviceId,
          robotWxId: _this.robot.robotWxId,
          expireDate: _this.robot.expireDate,
          clientIp: '',
          robotWxType: _this.robot.robotWxType,
          loginType: _this.loginType,
          inviteCode: _this.inviteCode
        })
        .then((res) => {
          _this.soNumber = res
        })
      // _this.getEncode()
      _this.timeControl();
    },
    getEncode () {
      const _this = this
      return new Promise((resolve, reject) => {
        _this.$get('/WxRobot/GetWxLoginResult', {
          soNumber: _this.soNumber
        }).then((res) => {
          let content = {}
          let msg = ''
          if (res) {
            if (res && res.state) {
              content = res
              switch (res.state) {
                case '0':
                  msg = '获取二维码失败'
                  break
                case '1':
                  msg = ''
                  _this.$store.dispatch('setLoginUrl', content.qrUrl)
                  _this.encode = content.qrUrl
                  // if (_this.control === 2) {
                  //   _this.timeControl()
                  // }

                  break
                case '2':
                  _this.robot.wxNick = content.wxNick
                  Dialog.alert({
                    title: '提示',
                    message: '登录成功'
                  }).then(() => {
                    // on close
                  })
                  clearInterval(_this.timeControls);
                  _this.$router.replace('/index')
                  break
                case '3':
                  msg = '登录异常：' + content.logoutReason
                  break
                case '6':
                  msg = '登录失败'
                  break
                default:
              }
              if (msg) {
                clearInterval(_this.timeControls);
                Dialog.alert({
                  title: '提示',
                  message: msg
                }).then(() => {
                  // on close
                })
              }
            }
          }
          resolve();
        }).catch((e) => {
          // _this.timeControl()
          reject();
        })
      })

    },
    timeControl () {
      const _this = this
      _this.getEncode()
      clearInterval(_this.timeControls);
      _this.timeControls = setInterval(async () => {
        await _this.getEncode()
      }, 5000)
    },
    refreshs () {
      const _this = this
      _this.encode = ''
      _this.$Toast("刷新成功！")
      _this.initData()
      // _this.initData();
    }
  }
}
</script>

<style scoped lang="scss">
@import "login";
</style>
